<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1 id="a">6666</h1>

    <script>

        // 线程：

        //  单线程和多线程


        //  简单理解：单线程做一件事情，多线程能处理多件事情

        //  多线程  执行效率更高    

        // js 是一门单线程的语法   java 是一门多线程的语言


        // js为什么是单线程
        //    js是干什么的？  前后端的数据交互， js接受数据之后最终还是为了进行DOM操作(数据显示在标签里面，修改css...)
        //    对一个标签增加一个内容   又要删除这个内容     是矛盾的   

        //    js只能是一种单线程的语言(不能同时删除又修改)

        //       在单线程存在异步
        //           事件 ， 定时器   。。。。


        // 同步： 先烧水，再泡茶   按照顺序执行
        // 异步： 听歌，写代码     先做哪个都行


        // js代码自上而下顺序一句一句的执行

        // var a = 1 ;

        // console.log(a) ;

        // b++ ;   // 出错了

        // console.log(a) ;   // 不会执行了



        var oH1 = document.getElementById('a') ;

        oH1.onclick = function() {
            console.log('我被点到了');
        }

        // 执行过程
        //   1 获取到了h1这个标签  存入了变量oH1中
        //   2 给这个标签绑定了事件  --- 函数并没有执行(用户点击了函数才会被调用)    --- 事件处理函数
        //   3 函数是异步的，暂时不会执行 --- 啥时候点击啥时候就执行



        // -----------------------------




        setTimeout(function(){
            console.log(666) ;
        } , 0)


        // 执行过程
        //  1 在页面上绑定了一个延时器  --- 函数并没有执行
        //  2 函数时异步的，暂时不会执行  --- 到时间了1s之后   才会执行




        console.log(2) ;  

        // 这是一个立即执行的代码 










        // js代码的执行过程   --- event loop
        //   1 首先执行所有的同步代码
        //   2 遇到异步的代码，这个异步会存储在任务队列中 --- 等待
        //   3 等所有的同步代码执行完毕之后
        //   4 主线程清空
        //   5 任务队列中到时间的异步任务进入主线程，开始执行
        //   1
        //   2
        //   3
        //   4
        //   5
        



        //   注意：任务队列中的异步程序不是排队的   谁先需要执行，就进入主线程去执行
        //        
 

        console.log(1) ;
        console.log(2) ;
        setTimeout(function(){
            console.log(3) ;
        } ,1000)
        console.log(4) ;

        setTimeout(function(){
            console.log(5) ;
            setTimeout(function(){
                console.log(7);
            } , 2000)
        } ,100)

        console.log(6) ;


        // 1 
        // 2
        // 4
        // 6

        // 3和5

        // 100ms之后   第二个延时器进入主线程    
        //    主线程有了新的同步代码   5

        // 3和7

        // 1s之后  3

        // 2s之后  7


        // 事件循环  --- 事件轮循   event loop



        for(var i = 0 ; i < 10 ; i++) {
            setTimeout(function(){
                console.log(i) ;   // 10个10
            } , 0)
        }

        // var i = 0 ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // setTimeout(function(){
        //     console.log(i) ;
        // } , 0)
        // i++ ;
        // ...




    </script>
    
</body>
</html>